(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global = global || self, global.easytable = factory());
}(this, function () { 'use strict';

    function renderIndexHead(thElem, col) {
        thElem.className = 'et-index-th';
        thElem.innerText = col.title;
    }

    function renderIndexBody(tdElem, index) {
        tdElem.className = '';
        tdElem.innerText = ++index;
    }

    function renderCheckboxHead(thElem, col) {
        thElem.className = 'et-checkbox-th';

        let checkboxElem = document.createElement('input');
        checkboxElem.type = 'checkbox';
        thElem.appendChild(checkboxElem);

        //点击全选或者全不选
        checkboxElem.onclick = function () {
            let tbodyElem = thElem.parentNode.parentNode.nextElementSibling;
            let checkboxElemArray = tbodyElem.getElementsByTagName('input');
            for (let tbodyCheckboxElem of checkboxElemArray) {
                tbodyCheckboxElem.checked = checkboxElem.checked;
            }
        };
    }

    function renderCheckboxBody(tdElem, col, rawData) {
        let checkboxElem = document.createElement('input');
        checkboxElem.type = 'checkbox';
        tdElem.appendChild(checkboxElem);
        checkboxElem.onclick = function () {
            let tbodyElem = tdElem.parentNode.parentNode;
            let theadElem = tbodyElem.previousElementSibling;
            //头只有一个checkbox
            let theadCheckboxElem = theadElem.getElementsByTagName('input')[0];
            let checkboxElemArray = tbodyElem.getElementsByTagName('input');
            theadCheckboxElem.checked = true;
            for (let tbodyCheckboxElem of checkboxElemArray) {
                theadCheckboxElem.checked = theadCheckboxElem.checked && tbodyCheckboxElem.checked;
            }
        };
    }

    //渲染普通表头
    function renderCommonHead(thElem, col) {
        thElem.className = 'et-common-th';
        thElem.innerText = col.title;
    }

    //渲染普通网格
    function renderCommonBody(tdElem, col, rawData) {
        let divElem = document.createElement('div');
        divElem.innerText = rawData[col.field];
        tdElem.appendChild(divElem);
        //渲染可编辑
        editable(divElem, col, rawData);
    }

    //控件编辑
    function editable(divElem, col, rawData) {
        if (col.editable) {//可编辑
            divElem.contentEditable = "true";
            divElem.onblur = () => {
                rawData[col.field] = divElem.innerText;
            };
        }
    }

    function renderRadioHead(thElem, col) {
        thElem.className = 'et-radio-th';
    }

    function renderRadioBody(tdElem, col, rawData) {
        let checkboxElem = document.createElement('input');
        checkboxElem.type = 'radio';
        //设置name值  同一name 的单选框自动支持单选
        checkboxElem.name = tdElem.parentNode.parentNode.parentNode.id;
        tdElem.appendChild(checkboxElem);
    }

    function renderButtonHead(thElem, col) {
        thElem.className = 'et-button-th';
        thElem.innerText = col.title;
    }

    function renderButtonBody(tdElem, col, rawData, index, tabelObj) {
        for (let button of col.buttons) {
            let buttonElem = document.createElement('button');
            buttonElem.className = 'et-button-td-btn';
            tdElem.appendChild(buttonElem);
            buttonElem.innerText = button.text;
            buttonElem.onclick = function () {
                button.click(col, rawData, index, tabelObj);
            };
        }
    }

    function renderSelectHead(thElem, col) {
        thElem.className = 'et-select-th';
        thElem.innerText = col.title;
    }

    function renderSelectBody(tdElem, col, rawData) {
        let selectElem = document.createElement('select');
        tdElem.appendChild(selectElem);
        for (let optData of col.select) {
            let optionElem = document.createElement("option");
            optionElem.value = optData.value;
            optionElem.innerHTML = optData.text;
            if (rawData[col.field] == optData.value) optionElem.selected = 'selected';
            selectElem.appendChild(optionElem);
        }
        //编辑渲染
        editable$1(selectElem,col,rawData);
    }

    //控件编辑
    function editable$1( selectElem, col, rawData) {
        if (col.editable) {//可编辑
            selectElem.onchange = function () {
                let index = selectElem.selectedIndex; // 选中索引
                let value = selectElem.options[index].value; // 选中值
                rawData[col.field] = value;
            };
        } else {//不可编辑
            selectElem.disabled = true;
        }
    }

    //搜索下拉框  不好用
    function renderSearchSelectHead(thElem, col) {
        thElem.className = 'et-search-input-th';
        thElem.innerText = col.title;
    }
    //行号
    function renderSearchSelectBody(tdElem, col, rawData, index) {
        let inputElem = document.createElement('input');
        inputElem.setAttribute('list', col.field + "_list_" + index);
        inputElem.tabIndex = '10000';
        tdElem.appendChild(inputElem);

        let datalistElem = document.createElement('datalist');
        tdElem.appendChild(datalistElem);
        datalistElem.id = inputElem.getAttribute('list');
        //创建list
        for (let optData of col.select) {
            let optionElem = document.createElement("option");
            optionElem.value = optData.text;
            optionElem.data = optData.value;
            datalistElem.appendChild(optionElem);
        }

        inputElem.onblur = function () {
            rawData[col.field] = inputElem.value;
            // for (let optData of col.select) {
            //     if (optData.value.indexOf(val) >= 0) {
            //         inputElem.innerText = optData.value;
            //         return;
            //     }
            // }
            // //都没有匹配的 认为是第一个
            // inputElem.value = col.select[0].text
        };
    }

    //渲染普通表头
    function renderDateHead(thElem, col) {
        thElem.className = 'et-date-th';
        thElem.innerText = col.title;
    }

    //渲染普通网格
    function renderDateBody(tdElem, col, rawData) {
        let inputElem = document.createElement('input');
        inputElem.value = rawData[col.field];
        inputElem.type = col.type;
        tdElem.appendChild(inputElem);
        //渲染可编辑
        editable$2(inputElem, col, rawData);
    }

    //控件编辑
    function editable$2(inputElem, col, rawData) {
        if (col.editable) ; else {//不可编辑
            inputElem.readOnly = true;
        }
    }

    class easytable {
        //构造方法
        constructor(id, option) {
            this.version = '1.0.1';
            //渲染容器id
            this.id = id;
            //初始化属性
            this.setOption(option);
            //渲染表格
            this.render();
        }
        //设置属性
        setOption(option) {
            this.option = option;
            // this.tableElem = document.getElementById(this.id);
            // this.option = option;
            this.cols = option.cols;
            this.data = option.data ? option.data : [];//表格数据默认值为空数组
            this.fieldArray = getFieldArray(option);
        }
        //渲染
        render() {
            this.divElem = document.getElementById(this.id);
            //清空表格
            clear(this.divElem);
            //渲染表格
            this.tableElem = document.createElement('table');
            this.divElem.appendChild(this.tableElem);
            //渲染表格样式
            this.divElem.className = 'et';
            this.tableElem.width = this.option.width ? this.option.width : '100%';
            //渲染普通列
            //渲染表头
            renderHead(this.tableElem, this.cols);
            //渲染表格
            renderBody(this.tableElem, this.cols, this.data, this);
            //索引列
        }
        //获取选中数据
        getSelectedData() {
            let tbodyElem = this.tableElem.getElementsByTagName('tbody')[0];
            //所有的input框都是单选框和多选框
            let elemArray = tbodyElem.getElementsByTagName('input');
            let selectedData = [];
            for (let i = 0; i < elemArray.length; i++) {
                if (elemArray[i].checked) {
                    selectedData.push(this.data[i]);
                }
            }
            return selectedData;
        }
        //获取选中行号
        getSelectedIndex() {
            let tbodyElem = this.tableElem.getElementsByTagName('tbody')[0];
            //所有的input框都是单选框和多选框
            let elemArray = tbodyElem.getElementsByTagName('input');
            let selectedIndex = [];
            for (let i = 0; i < elemArray.length; i++) {
                if (elemArray[i].checked) {
                    selectedIndex.push(i);
                }
            }
            return selectedIndex;
        }
        //增加行
        appendRaw(rawData) {
            if (!rawData) {
                rawData = {};
                for (let col of this.cols) {
                    if (col.field) {
                        rawData[col.field] = '';
                    }
                }
            }
            this.data.push(rawData);
            this.render();
        }
        //删除行
        deleteRaw(rawIndex) {
            this.data.splice(rawIndex, 1);
            this.render();
        }
        //删除多行
        deleteRaws(indexArr) {
            for (let i = 0; i < indexArr.length; i++) {
                this.deleteRaw(indexArr[i] - i);
            }
        }
    }



    //清空表格
    function clear(elem) {
        let nodes = elem.childNodes;
        for (let i = nodes.length - 1; i >= 0; i--) {
            elem.removeChild(nodes[i]);
        }
    }

    function getFieldArray(option) {
        let fieldArray = [];
        for (let col of option.cols) {
            fieldArray.push(col.field);
        }
        return fieldArray;
    }

    function renderHead(tableElem, cols) {
        let theadElem = document.createElement('thead');
        tableElem.appendChild(theadElem);
        let trElem = document.createElement('tr');
        theadElem.appendChild(trElem);
        for (let col of cols) {
            let thElem = document.createElement('th');
            renderHeadStyle(thElem, col);
            trElem.appendChild(thElem);
            switch (col.type) {
                case 'common':
                    renderCommonHead(thElem, col);
                    break;
                case 'index':
                    renderIndexHead(thElem, col);
                    break;
                case 'checkbox':
                    renderCheckboxHead(thElem, col);
                    break;
                case 'radio':
                    renderRadioHead(thElem, col);
                    break;
                case 'button':
                    renderButtonHead(thElem, col);
                    break;
                case 'select':
                    renderSelectHead(thElem, col);
                    break;
                case 'searchSelect':
                    renderSearchSelectHead(thElem, col);
                    break;
                case 'date':
                    renderDateHead(thElem, col);
                    break;
                case 'datetime-local':
                    renderDateHead(thElem, col);
                    break;
                default:
                    renderCommonHead(thElem, col);
                    break;
            }
        }

    }

    function renderBody(tableElem, cols, data, tabelObj) {
        let tbodyElem = document.createElement('tbody');
        tableElem.appendChild(tbodyElem);
        if (Array.isArray(data) && data.length != 0) {  //表格数据为数组，且有数据
            for (let i = 0; i < data.length; i++) {
                let rawData = data[i];
                let trElem = document.createElement('tr');
                tbodyElem.appendChild(trElem);
                for (let col of cols) {
                    let tdElem = document.createElement('td');
                    renderBodyStyle(tdElem, col);
                    trElem.appendChild(tdElem);
                    switch (col.type) {
                        case 'common':
                            renderCommonBody(tdElem, col, rawData);
                            break;
                        case 'index':
                            renderIndexBody(tdElem, i);
                            break;
                        case 'checkbox':
                            renderCheckboxBody(tdElem, col);
                            break;
                        case 'radio':
                            renderRadioBody(tdElem, col);
                            break;
                        case 'button':
                            renderButtonBody(tdElem, col, rawData, i, tabelObj);
                            break;
                        case 'select':
                            renderSelectBody(tdElem, col, rawData);
                            break;
                        case 'searchSelect':
                            renderSearchSelectBody(tdElem, col, rawData, i);
                            break;
                        case 'date':
                            renderDateBody(tdElem, col, rawData);
                            break;
                        case 'datetime-local':
                            renderDateBody(tdElem, col, rawData);
                            break;
                        default:
                            renderCommonBody(tdElem, col, rawData);
                            break;
                    }
                }
            }
        } else {//表格无数据
            let trElem = document.createElement('tr');
            tbodyElem.appendChild(trElem);
            let tdElem = document.createElement('td');
            trElem.appendChild(tdElem);
            tdElem.innerHTML = "暂无数据";
            trElem.className = 'et-empty';
            tdElem.colSpan = cols.length;
        }
    }

    //渲染表头样式
    function renderHeadStyle(thElem, col) {
        //样式设置
        if (!col.width) ; else {//表格单元格固定宽度
            thElem.style.width = col.width;
        }
        //最小宽度是30px
        thElem.style.minWidth = col.minWidth;
        thElem.style.textAlign = col.halign;
    }

    //渲染表格样式
    function renderBodyStyle(tdElem, col) {

        //样式设置
        if (!col.width) ; else {//表格单元格固定宽度
            tdElem.style.width = col.width;
        }

        //样式设置
        tdElem.style.width = col.width;
        tdElem.style.minWidth = col.minWidth;
        tdElem.style.textAlign = col.align;
    }

    return easytable;

}));
